<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试卷答题</title>
    <link rel="shortcut icon" href="../image/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="css/paper_test.css">
    <link rel="stylesheet" href="css/same.css">
    <style>
        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
        
        .layui-card-header {
            padding: 10px 20px 0px 20px;
            height: 80px;
        }

        /* 改变layui单选框选中颜色 */
        .layui-form-radio:hover *,
        .layui-form-radioed,
        .layui-form-radioed>i {
            color: #1890ff;
        }
        .layui-form-checkbox{
            margin-bottom: 15px;
        }
        /* 改变layui复选框选中颜色 */
        .layui-form-checked[lay-skin=primary] i {
            border-color: #1890ff !important;
            background-color: #1890ff;
            color: #fff;
        }
        /* 改变layui复选框经过颜色 */
        .layui-form-checkbox[lay-skin=primary]:hover i {
            border-color: #1890ff;
            color: #fff;
        }
        /* 增加layui复选框选中时title内容的颜色 */
        .layui-form-checked[lay-skin=primary] span {
            color: #1890ff;
        }

        /* 改变有疑问复选框选中颜色 */
        .avc .layui-form-checked[lay-skin=primary] i {
            border-color: orange !important;
            background-color: orange;
            color: #fff;
        }
        /* 改变有疑问复选框经过颜色 */
        .avc .layui-form-checkbox[lay-skin=primary]:hover i {
            border-color: orange;
            color: #fff;
        }
        /* 增加有疑问复选框选中时title内容的颜色 */
        .avc .layui-form-checked[lay-skin=primary] span {
            color: orange;
        }

        .layui-card {
            margin-bottom: 0;
        }

        .delBottom {
            border-bottom: 0;
        }

        .checkSuccess {
            /* background-color: #f0f9eb !important;
            border-color: #e1f3d8 !important;
            color: #67c23a !important; */
            background-color: #d4f5e4;
            border-color: #c2e6d1;
            color:#0bce63;
        }
        .checkQuery{
            background-color: rgb(245, 220, 174) !important;
            border-color: #f1bf72 !important;
            color:#ee8b79 !important;
        }

        /* 考试时间到提示框 */
        .hide-prompt {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 2999;
            background-color: rgba(0, 0, 0, .4);
        }

        .hide-prompt-model {
            width: 350px;
            height: 140px;
            padding: 30px 0;
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #fff;
            text-align: center;
            border-radius: 3px;
        }

        .hide-prompt-model span {
            display: inline-block;
            width: 50px;
            height: 50px;
            background: url(./image/ico.png) no-repeat;
        }

        .hide-prompt-model p {
            font-size: 16px;
            color: rgb(231, 156, 17);
            margin-bottom: 26px;
            margin-top: 12px;
        }
    </style>

</head>

<body style="background-color: #eff3f7;">

    <div id="app" v-cloak>
        <div class="sdd-paper-contain">
            <div class="paper-item-order-fake">
                <div class="paper-item-order">
                    <div class="layui-card" style="height: 93%;overflow:auto">
                        <div class="layui-card-header">
                            <div class="paper-name">{{exam.examPaperName}}</div>
                            <div class="paper-info">
                                <span>总分：{{exam.paperScore}}</span>
                                <span class="paper-time">时长：{{exam.suggestTime/60}}分钟</span>
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <div class="sdd-question-anchor">
                                <!-- <span class="sdd-question-span"
                                    onclick="javascript:document.getElementById('here').scrollIntoView()">1</span> -->
                                <a class="sdd-question-span" v-for="(p,i) in paperQuestions" :href="'#'+(i+1)"
                                    :id="'coordinate'+(i+1)">{{i+1}}</a>
                                <!-- <a class="sdd-question-span" v-for="(p,i) in paperQuestions" 
                                @click="javascript:document.getElementById(p.paperQuestionId).scrollIntoView()">{{i+1}}</a> -->

                            </div>
                            <hr>

                            <div class="sdd-remain-time">
                                <div class="sdd-remain-time-label">剩余时间</div>
                                <div class="sdd-remain-time-content"><span id="Time">考试结束</span></div>
                            </div>
                            <hr>

                            <div class="sdd-submit">
                                <button type="button" class="layui-btn layui-btn-normal"
                                    style="width: 120px;height: 35px;line-height: 35px;border-radius: 5px;"
                                    @click="save">
                                    提交试卷</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="paper-question-content layui-form">
                <div class="layui-card" v-if="singleCount!=0">
                    <div class="layui-card-header"
                        style="font-size: 18px;font-weight:500;height: 50px;background: #fafafa;border-top: 1px solid #dedede;border-bottom: 1px solid #dedede;">
                        单选题
                    </div>
                    <div class="layui-card-body" style="padding: 30px 30px;font-size: 14px;color: #4c596b;">

                        <div class="body-line" v-for="(p,i) in paperQuestions.slice(0,singleCount)" :id="i+1"
                            :class="{delBottom:i === singleCount-1}">
                            <div class="itemOrder">
                                <span class="indexTitle">{{i+1}}.</span>
                                <span class="question-title">{{p.questionContentInfo.title}}&nbsp;&nbsp;&nbsp;（ {{p.score}}分 ）</span>
                                <span style="margin-left: 20px;" class="avc">
                                    <input type="checkbox" name="query" value="query" lay-skin="primary" lay-filter="test4" title="有疑问?">
                                </span>
                            </div>
                            
                            <div class="question-content">
                                <input type="hidden" name="correctAnswer" v-bind:value="p.correctAnswer">
                                <input type="hidden" name="paperQuestionId" v-bind:value="p.paperQuestionId">
                                <label class="label-info">
                                    <input type="radio" :name="'questionSingle'+i"
                                        v-bind:value="p.questionContentInfo.questionA"
                                        :title="'A.'+p.questionContentInfo.questionA" lay-filter="test1">
                                    <!-- <span>A.{{p.questionContentInfo.questionA}}</span> -->
                                </label>
                                <label class="label-info">
                                    <input type="radio" :name="'questionSingle'+i"
                                        v-bind:value="p.questionContentInfo.questionB"
                                        :title="'B.'+p.questionContentInfo.questionB" lay-filter="test1">
                                    <!-- <span>B.{{p.questionContentInfo.questionB}}</span> -->
                                </label>
                                <label class="label-info">
                                    <input type="radio" :name="'questionSingle'+i"
                                        v-bind:value="p.questionContentInfo.questionC"
                                        :title="'C.'+p.questionContentInfo.questionC" lay-filter="test1">
                                    <!-- <span>C.{{p.questionContentInfo.questionC}}</span> -->
                                </label>
                                <label class="label-info">
                                    <input type="radio" :name="'questionSingle'+i"
                                        v-bind:value="p.questionContentInfo.questionD"
                                        :title="'D.'+p.questionContentInfo.questionD" lay-filter="test1">
                                    <!-- <span>D.{{p.questionContentInfo.questionD}}</span> -->
                                </label>

                            </div>
                        </div>

                    </div>

                </div>

                <div class="layui-card" v-if="multipleCount!=0">
                    <div class="layui-card-header"
                        style="font-size: 18px;font-weight:500;height: 50px;background: #fafafa;border-top: 1px solid #dedede;border-bottom: 1px solid #dedede;">
                        多选题</div>
                    <div class="layui-card-body" style="padding: 30px 30px;font-size: 14px;color: #4c596b;">

                        <div class="body-line"
                            v-for="(p,i) in paperQuestions.slice(singleCount,singleCount+multipleCount)"
                            :id="i+singleCount+1" :class="{delBottom:i=== multipleCount-1}">
                            <div class="itemOrder">
                                <span class="indexTitle">{{i+singleCount+1}}.</span>
                                <span class="question-title">{{p.questionContentInfo.title}}&nbsp;&nbsp;&nbsp;（ {{p.score}}分 ）</span>
                                <span style="margin-left: 20px;" class="avc">
                                    <input type="checkbox" name="query" value="query" lay-skin="primary" lay-filter="test4" title="有疑问?">
                                </span>
                            </div>
                            
                            <div class="question-content">
                                <input type="hidden" name="correctAnswer" v-bind:value="p.correctAnswer">
                                <input type="hidden" name="paperQuestionId" v-bind:value="p.paperQuestionId">

                                <input type="checkbox" name="questionMultiple" lay-skin="primary"
                                    v-bind:value="p.questionContentInfo.questionA"
                                    :title="'A.'+p.questionContentInfo.questionA" lay-filter="test2">
                                <label class="label-info"></label>

                                <input type="checkbox" name="questionMultiple" lay-skin="primary"
                                    v-bind:value="p.questionContentInfo.questionB"
                                    :title="'B.'+p.questionContentInfo.questionB" lay-filter="test2">
                                <label class="label-info"></label>

                                <input type="checkbox" name="questionMultiple" lay-skin="primary"
                                    v-bind:value="p.questionContentInfo.questionC"
                                    :title="'C.'+p.questionContentInfo.questionC" lay-filter="test2">
                                <label class="label-info"></label>


                                <input type="checkbox" name="questionMultiple" lay-skin="primary"
                                    v-bind:value="p.questionContentInfo.questionD"
                                    :title="'D.'+p.questionContentInfo.questionD" lay-filter="test2">
                                <label class="label-info"></label>


                                <input type="checkbox" name="questionMultiple" lay-skin="primary"
                                    v-bind:value="p.questionContentInfo.questionE"
                                    :title="'E.'+p.questionContentInfo.questionE" lay-filter="test2">
                                <label class="label-info"></label>

                            </div>
                        </div>

                    </div>

                </div>

                <div class="layui-card" v-if="judgeCount!=0">
                    <div class="layui-card-header"
                        style="font-size: 18px;font-weight:500;height: 50px;background: #fafafa;border-top: 1px solid #dedede;border-bottom: 1px solid #dedede;">
                        判断题</div>
                    <div class="layui-card-body" style="padding: 30px 30px;font-size: 14px;color: #4c596b;">

                        <div class="body-line"
                            v-for="(p,i) in paperQuestions.slice(singleCount+multipleCount,singleCount+multipleCount+judgeCount)"
                            :id="i+singleCount+multipleCount+1" :class="{delBottom:i === judgeCount-1}">
                            <div class="itemOrder">
                                <span class="indexTitle">{{i+singleCount+multipleCount+1}}.</span>
                                <span class="question-title">{{p.questionContentInfo.title}}&nbsp;&nbsp;&nbsp;（ {{p.score}}分 ）</span>
                                <span style="margin-left: 20px;" class="avc">
                                    <input type="checkbox" name="query" value="query" lay-skin="primary" lay-filter="test4" title="有疑问?">
                                </span>
                            </div>
                            
                            <div class="question-content">
                                <input type="hidden" name="correctAnswer" v-bind:value="p.correctAnswer">
                                <input type="hidden" name="paperQuestionId" v-bind:value="p.paperQuestionId">
                                <label class="label-info">
                                    <input type="radio" :name="'questionJudge'+i"
                                        v-bind:value="p.questionContentInfo.questionA"
                                        :title="'A.'+p.questionContentInfo.questionA" lay-filter="test3">
                                    <!-- <span>A.{{p.questionContentInfo.questionA}}</span> -->
                                </label>
                                <label class="label-info">
                                    <input type="radio" :name="'questionJudge'+i"
                                        v-bind:value="p.questionContentInfo.questionB"
                                        :title="'B.'+p.questionContentInfo.questionB" lay-filter="test3">
                                    <!-- <span>B.{{p.questionContentInfo.questionB}}</span> -->
                                </label>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <!-- 考试时间到 提示 -->
        <div class="hide-prompt" style="display: none;" id="timeOut">
            <div class="hide-prompt-model">
                <span></span>
                <p>考试时间已到，请提交试卷！</p>
                <button type="button" class="layui-btn layui-btn-normal"
                    style="width: 120px;height: 35px;line-height: 35px;border-radius: 5px;" @click="cls">提交试卷</button>
            </div>
        </div>

        <div id="back-top">
            <i class="layui-icon layui-icon-top" style="font-size: 38px;font-weight: 600;"></i>
        </div>

    </div>



    <script src="../layui/layui.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/jquery.cookie.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="js/same.js"></script>
    <script src="js/paper_test.js"></script>
    <script src="js/test_time.js"></script>
    <script>
        layui.use('form', function () {
            let form = layui.form;

            // 单选题监听
            form.on('radio(test1)', function (data) {
                // console.log(data.elem); //得到radio原始DOM对象
                // console.log(data.elem.name); //被点击的radio的name值
                // console.log(data.value); //被点击的radio的value值
                let checkName = data.elem.name;

                for (let i = 0; i < app.singleCount; i++) {

                    let newName = "questionSingle" + i;
                    if (checkName == newName) {
                        // 得到对应的瞄点坐标ID
                        let coordinateId = "coordinate" + (i + 1);
                        // 为对应的瞄点坐标添加已做题样式
                        if (!$("#" + coordinateId + "").hasClass("checkSuccess")) {
                            $("#" + coordinateId + "").addClass("checkSuccess");
                        }

                    }
                }
            });

            // 多选题监听
            form.on('checkbox(test2)', function (data) {
                // console.log(data.elem); //得到checkbox原始DOM对象
                // console.log(data.elem.checked); //是否被选中，true或者false
                // console.log(data.value); //复选框value值，也可以通过data.elem.value得到
                // console.log(data.othis); //得到美化后的DOM对象

                for (let i = 0; i < app.multipleCount; i++) {
                    let newId = app.singleCount + 1 + i;
                    let multiple = '';
                    $("#" + newId + " input:checkbox[name='questionMultiple']:checked").each(function () {
                        multiple = multiple + $(this).val() + "&";
                    });
                    // 得到对应的瞄点坐标ID
                    let coordinateId = "coordinate" + (app.singleCount + i + 1);
                    if (multiple != '') {
                        // 为对应的瞄点坐标添加已做题样式
                        if (!$("#" + coordinateId + "").hasClass("checkSuccess")) {
                            $("#" + coordinateId + "").addClass("checkSuccess");
                        }
                    } else {
                        $("#" + coordinateId + "").removeClass("checkSuccess");
                    }
                }
            });

            // 判断题监听
            form.on('radio(test3)', function (data) {
                // console.log(data.elem); //得到radio原始DOM对象
                // console.log(data.elem.name); //被点击的radio的name值
                // console.log(data.value); //被点击的radio的value值
                let checkName = data.elem.name;

                for (let i = 0; i < app.judgeCount; i++) {

                    let newName = "questionJudge" + i;
                    if (checkName == newName) {
                        // 得到对应的瞄点坐标ID
                        let coordinateId = "coordinate" + (app.singleCount + app.multipleCount + i + 1);
                        // 为对应的瞄点坐标添加已做题样式
                        if (!$("#" + coordinateId + "").hasClass("checkSuccess")) {
                            $("#" + coordinateId + "").addClass("checkSuccess");
                        }
                    }
                }
            });

            // 疑问框监听
            form.on('checkbox(test4)', function (data) {

                for (let i = 0; i < app.paperQuestions.length; i++) {
                    let newId = i+1;
                    let multiple = '';
                    $("#" + newId + " input:checkbox[name='query']:checked").each(function () {
                        multiple = $(this).val();
                    });
                    // 得到对应的瞄点坐标ID
                    let coordinateId = "coordinate" + (i + 1);
                    if (multiple != '') {
                        // 为对应的瞄点坐标添加已做题样式
                        if (!$("#" + coordinateId + "").hasClass("checkQuery")) {
                            $("#" + coordinateId + "").addClass("checkQuery");
                        }
                    } else {
                        $("#" + coordinateId + "").removeClass("checkQuery");
                    }
                }
            });

        });



        // 监听切屏操作
        document.addEventListener('visibilitychange', () => {
            // 判断答卷试卷是否已到，如已到，则不再监听切屏
            let djsendtime = $.cookie("djsendtime");
            if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') {
                $("#timeOut").show();
                return;
            }

            if (document.visibilityState === 'hidden') {
                return;
            }


            // let $counter = document.querySelector('#counter')
            // let counter = ~~($counter.innerHTML)

            let sessionCount = sessionStorage.getItem("changeCount");
            let changeCount = parseInt(sessionCount) + 1;
            sessionStorage.setItem("changeCount", changeCount);

            // $counter.innerHTML = changeCount

            // 对未达到三次切屏次数予以警告
            if (changeCount < 3) {
                layer.open({
                    closeBtn: 0,  // 右上角关闭
                    resize: false,  // 是否允许拉伸
                    move: false,    // 是否允许拖拽
                    title: ['警告', 'font-size:18px'],
                    content: '\<\span style="color:red;">请不要离开试卷或做其他违规操作，超过三次试卷会自动提交！\<\/span>',
                    btn: ['确定'],
                    yes: function (index, layero) {
                        layer.close(index);
                    }
                });
            }

            // 如已达到三次切屏操作，则直接舞弊0分处理
            if (changeCount >= 3) {
                layer.open({
                    closeBtn: 0,  // 右上角关闭
                    resize: false,  // 是否允许拉伸
                    move: false,    // 是否允许拖拽
                    title: ['考试违规', 'font-size:18px;color:red'],
                    content: '试卷得分：0分',
                    btn: ['返回考试记录'],
                    yes: function (index, layero) {
                        let user = JSON.parse(sessionStorage.getItem('user'));
                        let exam = JSON.parse(sessionStorage.getItem('exam'));

                        // 计算答卷时间
                        let doTime = null;
                        let djsendtime = $.cookie("djsendtime");                      // 倒计时结束时间
                        if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') {
                            doTime = exam.suggestTime;
                        } else {
                            let now = new Date().getTime();                               // 当前时间
                            let locksecends = parseInt((djsendtime - now) / 1000);        // 剩余时差
                            doTime = exam.suggestTime - locksecends;                    // 答卷时间
                        }

                        let formData = {
                            'examPaperId': exam.examPaperId,
                            'examPaperName': exam.examPaperName,
                            'paperType': exam.paperType,
                            'subjectName': exam.subjectName,
                            'levelName': exam.levelName,
                            'paperScore': exam.paperScore,
                            'studentScore': 0,
                            'questionCount': exam.questionCount,
                            'questionCurrent': 0,
                            'doTime': doTime,
                            'createUser': user.userId,
                            'userName': user.userName,
                            'createTime': exam.createTime,
                            'status':3  // 舞弊处理
                        }
                        console.log(formData);

                        // 生成答卷结果记录
                        $.ajax({
                            url: 'http://localhost:8080/examPaperResult/add',
                            type: 'post',
                            data: formData,
                            beforeSend: function () {
                                loadIndex = layer.load(1, {
                                    shade: [0.5, '#fff'] //0.1透明度的白色背景
                                });
                            },
                            success: function (vo) {
                                if (vo.code == 200) {

                                    // 添加当前用户的一条日志记录
                                    let formData2 = {
                                        userId: user.userId,
                                        userName: user.userName,
                                        realName: user.realName,
                                        content: "提交试卷《" + exam.examPaperName + "》 得分：0 耗时：" + doTime + "秒",
                                    }
                                    $.ajax({
                                        url: 'http://localhost:8080/log/add',
                                        type: 'post',
                                        data: formData2,
                                        success: function (vo2) {
                                            if (vo2.code == 200) {
                                                // 清除倒计时的cookie值
                                                $.cookie("djsendtime", null);
                                                layer.close(index);
                                                window.location.replace("exam_record.html");
                                            }
                                        }
                                    });
                            
                                }
                            }
                        });
                    }
                });
            }
        })


    </script>

</body>

</html>